// Global Mixins

@mixin e-clearfix() {
	&:before, 
	&:after {
		content: " "; // 1
		display: table; // 2
	}
	&:after {
		clear: both;
	}
}

@mixin e-button-reset() {
    appearance: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
    cursor: pointer;
    background: none;
    outline: none !important; 
    margin: 0;
    padding: 0;
}
    
@mixin e-input-reset() {
	border: 0;
	background: none;
	outline: none !important;
	box-shadow: none;
}

@mixin e-btn-reset() {
    border: 0;
    background: none;
    outline: none !important;
    box-shadow: none;
}

@mixin e-fix-fixed-position-lags() {
	// webkit hack for smooth font view on fixed positioned elements
	-webkit-backface-visibility:hidden; 
	backface-visibility:hidden; 
}

@mixin e-fix-animation-lags() {
    transform: translateZ(0); 
    -webkit-transform-style: preserve-3d;
}

@mixin e-attr($attr, $value, $important: '') {
    @if  $value != null  {
        #{$attr}: #{$value} #{$important}; 
    } 
}

@mixin e-hack-ie {
	@media screen\0 {
		@content;
	}
}

@mixin e-hack-edge-all {
	@supports (-ms-ime-align:auto) {
		@content;
	}
}

@mixin e-rounded {
    @if $e-enable-rounded == true {
      @content;
    }
}

@mixin e-not-rounded {
    @if $e-enable-rounded == false {
        @content;
    }
}

// Input placeholder color
@mixin e-input-placeholder($color) {
    &::-moz-placeholder {
        color: $color;
        opacity: 1;
    }
    &:-ms-input-placeholder {
        color: $color;
    }
    // Internet Explorer 10+
    &::-webkit-input-placeholder {
        color: $color;
    }
}

@mixin e-hover-transition {
    transition: $e-transition;

    &:hover {
        transition: $e-transition;
    }
}

@mixin e-transition {
    transition: $e-transition;
}

// 图标尺寸
// SASS Map:  (lineawesome: 1.1rem, fontawesome: 1.2rem, flaticon: 1.1rem)
@mixin e-icons-size($config) {
    // Lineawesome
    [class^="la-"], 
    [class*=" la-"] {
        font-size: e-get($config, lineawesome);
        //line-height: e-get($config, lineawesome);
    } 

    // Fontawesome 
    [class^="fa-"], 
    [class*=" fa-"] {
        font-size: e-get($config, fontawesome);
        //line-height: e-get($config, fontawesome);
    } 

    // Flaticon 
    [class^="flaticon-"],
    [class*=" flaticon-"],
    [class^="flaticon2-"],
    [class*=" flaticon2-"] {
        font-size: e-get($config, flaticon);
        //line-height: e-get($config, flaticon);
    }
}

// Icon attr
// SASS Map:  (lineawesome: 1.1rem, fontawesome: 1.2rem, flaticon: 1.1rem)
@mixin e-icons-style($attr, $config) {
    // lineawesome
    [class^="la-"], 
    [class*=" la-"] {
        #{$attr}: e-get($config, lineawesome);
    } 

    // Fontawesome 
    [class^="fa-"], 
    [class*=" fa-"] {
        #{$attr}: e-get($config, fontawesome);
    } 

    // Flaticon 
    [class^="flaticon-"],
    [class*=" flaticon-"],
    [class^="flaticon2-"],
    [class*=" flaticon2-"] {
        #{$attr}: e-get($config, flaticon);
    }
}

// SASS Map:  (lineawesome: 1.1rem, fontawesome: 1.2rem, flaticon: 1.1rem)
@mixin e-icons {
    [class^="la-"], 
    [class*=" la-"],
    [class^="fa-"], 
    [class*=" fa-"],
    [class^="flaticon-"],
    [class*=" flaticon-"],
    [class^="flaticon2-"],
    [class*=" flaticon2-"] {
        @content;
    }
}

// Lineawesome icon
@mixin e-la-icon($icon) {
    font-family: "LineAwesome";
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    
    &:before {
        content: "#{$icon}";
    }
}

@mixin e-la-icon-change($icon) {
    &:before {
        content: "#{$icon}";
    }
}

@mixin e-flaticon2-icon($icon) {
    font-family: Flaticon2;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 1;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    content: "#{$icon}";
}

// Lineawesome icon
@mixin e-la-icon-self($icon) {
    font-family: "LineAwesome";
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    content: "#{$icon}";
}

// Close icon
@mixin e-close-icon($self:null) {
    @if $self == true {
        @include e-la-icon-self( e-get($e-action-icons, close) );
    } @else {
        @include e-la-icon( e-get($e-action-icons, close) );
    }
}

// Arrow icon
@mixin e-arrow-icon($dir, $self:null) {
    @if $dir == down {
        @if $self == true {
            @include e-la-icon-self( e-get($e-action-icons, down) );
        } @else {
            @include e-la-icon( e-get($e-action-icons, down) );
        }
    }

    @if $dir == up {
        @if $self == true {
            @include e-la-icon-self( e-get($e-action-icons, up) );
        } @else {
            @include e-la-icon( e-get($e-action-icons, up) );
        }
    }

    @if $dir == left {
        @if $self == true {
            @include e-la-icon-self( e-get($e-action-icons, left) );
        } @else {
            @include e-la-icon( e-get($e-action-icons, left) );
        }
    }

    @if $dir == right {
        @if $self == true {
            @include e-la-icon-self( e-get($e-action-icons, right) );
        } @else {
            @include e-la-icon( e-get($e-action-icons, right) );
        }
    }
}

// Svg icon color 
@mixin e-svg-icon-color($color) {
    g {
        [fill] {
            transition: fill .3s ease;
            fill: $color;
        }
    }

    &:hover {
        g {
            [fill] {
                transition: fill .3s ease;
            }
        }
    }
}

// Breakpoint mixins
// Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.

@mixin e-media-below($width) {
    @media (max-width: #{e-media-breakpoint($width)}) {
        @content;
    }
}

@mixin e-media-above($width) {
    @media (min-width: #{e-media-breakpoint($width) + 1px}) {
        @content;
    }
}

@mixin e-media-range($from, $to) {
    @media (min-width: #{e-media-breakpoint($from) + 1px}) and (max-width: #{e-media-breakpoint($to)}) {
        @content;
    }
}

@mixin e-minimal-desktop {
    @media (min-width: #{e-media-breakpoint(lg) + 1px}) and (max-width: #{e-media-breakpoint(xl)}) {
        @content;
    }
}

@mixin e-minimal-desktop-and-below {
    @media (max-width: #{e-media-breakpoint(xl)}) {
        @content;
    }
}

@mixin e-desktop {
    @media (min-width: #{e-media-breakpoint(lg) + 1px}) {
        @content;
    }
}

@mixin e-desktop-xl {
    @media (min-width: #{e-media-breakpoint(xl) + 1px}) {
        @content;
    }
}

@mixin e-desktop-xxl {
    @media (min-width: #{e-media-breakpoint(xxl) + 1px}) {
        @content;
    }
}
@mixin e-desktop-xxxl {
    @media (min-width: #{e-media-breakpoint(xxxl) + 1px}) {
        @content;
    }
}

@mixin e-desktop-and-tablet {
    @media (min-width: #{e-media-breakpoint(md) + 1px}) {
        @content;
    }
}

@mixin e-tablet {
    @media (min-width: #{e-media-breakpoint(md) + 1px}) and (max-width: #{e-media-breakpoint(lg)}) {
        @content;
    }
}

@mixin e-tablet-and-mobile {
    @media (max-width: #{e-media-breakpoint(lg)}) {
        @content;
    }
}

@mixin e-mobile {
    @media (max-width: #{e-media-breakpoint(md)}) {
        @content;
    }
} 

@mixin e-mobile-sm {
    @media (max-width: #{e-media-breakpoint(sm)}) {
        @content;
    }
} 

@mixin e-responsive-below($width) {
    @media (max-width: #{$width}) {
      @content;
    }
}

@mixin e-responsive-above($width) {
    @media (min-width: #{$width}) {
      @content;
    }
}

@mixin e-responsive-range($from, $to) {
    @media (min-width: #{$from}) and (max-width: #{$to}) {
      @content;
    }
}